.header {
  a:not(:first-of-type) {
    margin-left: 5px;
  }
}

.right.floated.content {
  padding-right: 10px;
}

.tiles-container {
  display: table-row-group;
  table-layout: fixed;
  
  label {
    display: table-cell;
    vertical-align: middle;
    padding-right: 2em;
    position: relative;

    i {
      display: none;
      position: absolute;
      right: 0;
      cursor: pointer;
    }

    &:hover > i {
      display: inline-block;
    }
  }

  .tiles {
    display: table-cell;
    width: 100%;
    
    .tile {
      display: inline-block;
      width: 60px;
      height: 60px;
      margin: 2px;
      text-overflow: ellipsis;
      text-align: center;
      vertical-align: bottom;
      line-height: 60px;
      border-radius: 5px;
      position: relative;

      > .tags {
        position: absolute;
        bottom: 0px;
        left: 0;
        right: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 60px;
        line-height: normal;
        z-index: 1;

        .tag {
          vertical-align: bottom;
          color: white;
          font-size: 0.6em;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }
      }

      .detail {
        line-height: 10px;
        display: none;
        position: absolute;
        z-index: 999;
        background-color: white;
        border-top-right-radius: 5px;
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
        border-top-left-radius: 5px;
        border: 1px solid rgba(180,180,180,0.5);
        box-shadow: 0px -2px 5px rgba(180,180,180,0.5);
        white-space: nowrap;
        bottom: calc(100% + 10px);
        border: 6px solid transparent;
        text-align: left;
        
        td {
          padding: 3px 10px;
        }

        &:after {
          width: 0;
          height: 0;
          content: '';
          position: absolute;
          border-right: 18px solid transparent;
          border-left: 18px solid transparent;
          border-top: 17px solid white;
          left: 13px;
          bottom: -16px;
          display: block;
        }
        
        &:before {
          width: 0;
          height: 0;
          content: '';
          position: absolute;
          border-right: 19px solid transparent;
          border-left: 19px solid transparent;
          border-top: 19px solid #BEBEBE;
          left: 12px;
          bottom: -19px;
          display: block;
        }
        
        .property {
          font-weight: bold;
        }

        .tags {
          width: 100%;
          max-width: 400px;
          .tag {
            background-color: #343856;
            color: white;
            max-width: 180px;
            overflow: hidden;
            text-overflow: ellipsis;
            border-radius: 2px;
            padding: 4px;
            margin-right: 3px;
            margin-bottom: 3px;
            display: inline-block;
            white-space: nowrap;
            float: left;
          }
        }
      }

      &:hover > .detail {
        display: table;
      }

      a {
        color: white;
        vertical-align: middle;
      }

      &.green {
        background: #21ba45;
      }

      &.blue {
        background: #2185d0;
      }

      &.red {
        background: #db2828;
      }

      &.grey {
        background-color: rgba(120,120,120,1);
      }

    }
  }
}